<template>
  <div class="app-page">
    <el-tabs ref="orderManageTab" v-model="activeName" type="card">
      <el-tab-pane v-if="$hasTabPermission(40101)" label="订单查询" name="first">
        <tab1 />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40102)" label="待配送" name="second">
        <tab2 />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40103)" label="已签收" name="third">
        <tab3 />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40104)" label="待回执" name="seventh">
        <tab7 />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40105)" label="超时" name="fouth">
        <tab4 />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40106)" label="催单" name="fifth">
        <tab5 />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40107)" label="预约变更" name="sixth">
        <tab6 :options-map="optionsMap" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(40108)" label="退单" name="eighth">
        <tab8 />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import tab1 from './components/tab1.vue'
  import tab2 from './components/tab2.vue'
  import tab3 from './components/tab3.vue'
  import tab4 from './components/tab4.vue'
  import tab5 from './components/tab5.vue'
  import tab6 from './components/tab6.vue'
  import tab7 from './components/tab7.vue'
  import tab8 from './components/tab8.vue'
  import { querySubTypeMap, queryMap } from '@/api'
  export default {
    name: 'orderInfo',
    components: {
      tab1, tab2, tab3, tab4, tab5, tab6, tab7, tab8
    },
    data() {
      return {
        activeName: 'first',
        optionsMap: {},
        subTypeAllList: []
      }
    },
    watch: {
      $route: {
        handler: function(to, from) {
          console.log('1111===============')
          this.reGetUrlParams()
        },
        deep: true
      }
    },
    created() {
      console.log('created=======')
      this.queryOptionsMap()
    },
    mounted() {
      this.activeName = this.$refs.orderManageTab.panes.length ? this.$refs.orderManageTab.panes[0].name : ''
      this.reGetUrlParams()
    },
    methods: {
      reGetUrlParams() {
        if (this.$route.query) {
          const urlParams = this.$route.query
          this.activeName = urlParams.type && Number(urlParams.type) === 5 ? 'fifth' : 'first'
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res, res1, res2, res3, res4, res5, res6, res7, res8, res9] = await Promise.all([
          await querySubTypeMap({ }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'ReStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' }),
          mergeAsyncFunc(queryMap, { enumName: 'CalcType' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderUpdateSource' })
        ])
        this.subTypeAllList = res.data // 用气性质
        const orderStatusMap = res1.data.filter((item) => item.value !== 4 && item.value !== 6 && item.value !== 8) // 订单类型(去掉‘已转派’“已接收”“已出库”)
        const orderFlagMap = res2.data // 订单类型
        const customerTypeMap = res3.data // 客户类型
        const payStatusMap = res4.data // 支付状态
        const paymentMethodMap = res5.data.filter(item => item.value === 1 || item.value === 2 || item.value === 16 || item.value === 128 || item.value === 256 || item.value === 1024 || item.value === 2048) // 支付方式
        const reStatusMap = res6.data // 回执状态
        const orderSourceMap = res7.data // 订单来源
        const calcTypeList = res8.data // 收款方式
        const orderUpdateSource = res9.data
        this.optionsMap = { orderStatusMap, orderFlagMap, customerTypeMap, payStatusMap, paymentMethodMap,
                            reStatusMap, orderSourceMap, calcTypeList, orderUpdateSource }
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0;
}
.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
.btn-group {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-table tr.danger-row {
  background: #ffeced;
}
/deep/ .el-table tr.giveup-row {
  background: #ffeced;
}
/deep/.red {
  color: #f00 !important;
}
/deep/.yellow {
  color: #ed912e !important;
}
</style>
